<template>
  <Card title="过滤条件" :bordered="false" :head-style="headStyle" :loading="loading">
    <template #extra>
      <RadioGroup v-model:value="comb" button-style="solid">
        <template v-for="item in tjList" :key="`${item.value}`">
          <RadioButton :value="item.value">
            {{ item.label }}
          </RadioButton>
        </template>
      </RadioGroup>
      <a-button class="ml-2" type="primary" @click="handleOk" :loading="loading"> 保存 </a-button>
    </template>
    <div class="w-full flex flex-col gap-10px">
      <template v-if="comb == '1'">
        <div>
          <a-button
            style="margin: 10px 0"
            :type="dataRef.condition && dataRef.condition.length ? 'primary' : 'default'"
            @click="handleConfiguration"
          >
            配置
          </a-button>
        </div>
      </template>
      <FilterConditionsDesign
        v-if="comb == '2'"
        v-model:modelValue="dataRef.filter"
        :formGetFieldsData="formGetFieldsData"
        @update-filter-field="handleUpdateFilterField"
      />
      <div class="flex items-center gap-10px">
        默认
        <Select
          style="width: 130px"
          v-model:value="dataRef.filterUnitCode"
          :options="unitCodeOptions"
          optionFilterProp="label"
          showSearch
        />
        <!-- 注：此处配置在表单域选择宏控件、嵌套表格及嵌套表格2宏控件的过滤条件中也生效。 -->
      </div>
    </div>
    <ConfigurationModal
      @register="registerConfigurationModal"
      @success="handleSuccessConfigurationModal"
    />
  </Card>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Card, Radio, Select } from 'ant-design-vue';
  import FilterConditionsDesign from './filterConditionsDesign/index.vue';
  import ConfigurationModal from '../../configuration/index';
  import { useModal } from '/@/components/Modal';
  import { unitCodeOptions } from '../../setupComponent/filterConditions/filterConditions';
  import { getVisualSetModulePrivFilter } from '/@/api/module/module';
  import { useMessage } from '/@/hooks/web/useMessage';
  const RadioGroup = Radio.Group;
  const RadioButton = Radio.Button;
  const props = defineProps({
    headStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formGetFieldsData: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    filterCond: {
      type: String,
      default: '',
    },
    mainId: {
      type: String,
      default: '',
    },
    filterUnitCode: {
      type: Number,
      default: 0,
    },
  });
  const emit = defineEmits(['success']);
  const { createMessage } = useMessage();
  const comb = ref('1');
  const dataRef = ref<Recordable>({});
  const loading = ref(false);

  // const fetch = async () => {
  //   await nextTick();
  // };
  // onMounted(fetch);
  watch(
    () => props.filterCond,
    (val) => {
      console.log('props.filterCond', val);
      dataRef.value = {
        condition: '',
        filter: '',
        filterField: '',
        id: '',
      };
      if (val) {
        if (val.indexOf('<items') != -1) {
          comb.value = '1';
          dataRef.value.condition = val;
        } else {
          comb.value = '2';
          dataRef.value.filter = val;
        }
      }
    },
    {
      immediate: true,
    },
  );

  watch(
    () => props.filterUnitCode,
    (val) => {
      console.log('props.filterUnitCode', val);
      dataRef.value.filterUnitCode = val;
    },
    {
      immediate: true,
    },
  );

  const tjList = [
    {
      value: '1',
      label: '组合条件',
    },
    {
      value: '2',
      label: '脚本条件',
    },
  ];

  const [registerConfigurationModal, { openModal: openConfiguration }] = useModal();
  //组合条件配置
  const handleConfiguration = () => {
    openConfiguration(true, {
      list: dataRef.value.condition || [],
      formGetFieldsData: props.formGetFieldsData,
    });
  };

  const handleSuccessConfigurationModal = ({ value }) => {
    dataRef.value.condition = value;
  };
  const handleUpdateFilterField = (value) => {
    dataRef.value.filterField = value;
  };
  //保存
  const handleOk = async () => {
    try {
      loading.value = true;
      const formData = Object.assign({}, dataRef.value);
      formData.id = props.mainId;
      if (comb.value == '1') {
        formData.filter = formData.condition;
        formData.filterField = '';
      }
      console.log('formData', formData);
      await getVisualSetModulePrivFilter(formData);
      createMessage.success('操作成功');
      emit('success');
    } catch (error) {
      console.error(error);
    } finally {
      loading.value = false;
    }
  };
</script>
